<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            padding: 20px;
        }
        .page{
            height: 400px;
            line-height: 400px;
            box-shadow: 0 0 12px #ccc;
            font-size: 40px;
            text-align: center;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <input type="button" value="页面1" @click="flag=true">
        <input type="button" value="页面2" @click="flag=false"> -->
        <input type="button" value="页面1" @click=" page='PageA' ">
        <input type="button" value="页面2" @click=" page='PageB' ">
        <input type="button" value="页面3" @click=" page='PageC' ">
        <input type="button" value="页面4" @click=" page='PageD' ">


        <hr>

        <!-- <page-a v-if="flag"></page-a>
        <page-b v-else></page-b> -->
        <!-- <page-a v-if="  page=='PageA' "></page-a>
        <page-b v-if="  page=='PageB' "></page-b>
        <page-c v-if="  page=='PageC' "></page-c> -->

        <!-- 
            动态组件技术：
                目的 = 简化页面组件切换定义时组件标签定义数量
            vue提供的动态组件 component 本质就是一个页面位置定位标签，
                通过对应 is 属性绑定变量加载组件进行渲染显示操作，is 的取值必须是已定义的 组件的 名称
        -->
        <component :is='page'></component>
        <!-- <component is='PageA'></component> -->
        <!-- <page-a></page-a> -->
        
        <hr>
    </div>

    <script>

        Vue.component("PageA", {
            template:`
                <div class="page">
                    页面1
                </div>
            `
        })
        Vue.component("PageB", {
            template:`
                <div class="page">
                    页面2
                </div>
            `
        })
        Vue.component("PageC", {
            template:`
                <div class="page">
                    页面3
                </div>
            `
        })
        Vue.component("PageD", {
            template:`
                <div class="page">
                    页面4
                </div>
            `
        })

        new Vue({
            el:"#app",
            data:{
                flag:true,
                page:"PageA"
            }
            
        })
    </script>
</body>
</html>